@extends('web.master')
@section('title',$detail->title)
    @section('head')
        <link rel="stylesheet" href="{{asset('statics/css/index.css')}}" />
        <script type="text/javascript" src="{{asset('statics/js/TouchSlide.1.1.js')}}"></script>

        <style>
            .focus .bd li {
                background: url('{{asset('storage/'.$detail->thumb)}}') no-repeat center;
                background-size: cover;
                width: 100%;
                height: 160px;
            }
        </style>
        @endsection
@section('content')
    <div id="content">
        <div id="focus" class="focus">
            <div class="hd">
                <ul></ul>
            </div>
            <div class="bd">
                <ul>
                    <li></li>
                    <li></li>
                    <li></li>
                </ul>
            </div>
        </div>
        <script type="text/javascript">
            TouchSlide({
                slideCell: "#focus",
                titCell: ".hd ul", //开启自动分页
                mainCell: ".bd ul",
                effect: "left",
                autoPlay: true, //自动播放
                autoPage: true, //自动分页
            });
        </script>
    </div>
    <!--头部信息-->
    <div class="activityTop">
        <p class="title">
            {{$detail->title}}
        </p>
        <div class="audio">
            @if($isBuy)
                <div class="audioplay" style="height: 50px;" >
                    <audio controls="controls" style="width: 100%;margin-top: 5px;" id="mp3Play">
                        <source src="{{route('file',['filename'=>$detail->voice])}}" type="audio/mpeg">
                    </audio>
                </div>
                @else
                <a href="{{route('combo_list')}}" class="aBtn"><img src="{{asset('statics/images/video.png')}}" />前去充值</a>
            @endif

            <!--修改前结构-->
            <!--<audio controls="controls">
                <source src="{{route('file',['filename'=>$detail->voice])}}" type="audio/mpeg">
            </audio>-->
        </div>
    </div>
    <script>

		</script>
    <!--详情-->
    <div class="activityDet" id="desc">
        <div class="other">
            <span class="tip"><i></i>简单描述</span>
        </div>
        <div class="text">
          {!! $detail->content !!}
        </div>
    </div>
    @endsection
@section('foot')

        <script type="text/javascript" src="{{asset('statics/js/jquery.min.js')}}"></script>
<script>
    myVid=document.getElementById("mp3Play");
    //myVid.onprogress=alert("Starting to load video");
   // myVid.oncanplay=alert("Can start playing video");

	        $('.aListen').click(function() {
				$(".audioplay").show();
				document.querySelector("#mp3Play").play();
				$(this).hide()
			})
	        $(function(){
                var overscroll = function(el) {
                el.addEventListener('touchstart', function() {
                    var top = el.scrollTop
                        , totalScroll = el.scrollHeight
                        , currentScroll = top + el.offsetHeight;
                    //If we're at the top or the bottom of the containers
                    //scroll, push up or down one pixel.
                    //
                    //this prevents the scroll from "passing through" to
                    //the body.
                    if(top === 0) {
                        el.scrollTop = 1;
                    } else if(currentScroll === totalScroll) {
                        el.scrollTop = top - 1;
                    }
                });
                el.addEventListener('touchmove', function(evt) {
                    if(el.offsetHeight < el.scrollHeight)
                        evt._isScroller = false;
                });
                    //if the content is actually scrollable, i.e. the content is long enough
                    //that scrolling can occur

                }
                overscroll(document.querySelector('#content'));

                document.body.addEventListener('touchmove', function(evt) {
                    //In this case, the default behavior is scrolling the body, which
                    //would result in an overflow.  Since we don't want that, we preventDefault.
                    if(!evt._isScroller) {
                        //evt.preventDefault();
                    }

                });

            })
                //音频播放
    @if($isBuy)
    $(function() {
        var oAudio = document.querySelector('#mp3Play');
        oAudio.preload = 'auto';
        oAudio.play();
         document.addEventListener("WeixinJSBridgeReady", function() {
             WeixinJSBridge.invoke('getNetworkType', {}, function(e) {
                 if (oAudio.paused) {
                     oAudio.play();
                 }

             });
         }, false);
    });
    @endif
</script>
@endsection